<template>
     <!-- 搜索  添加 -->
     <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
        <el-form-item label="问题标题">
            <el-input v-model="queryInfo.questionTitle" placeholder="请输入" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="getQuestionList">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100% ;text-align: center;">
        <el-table-column prop="questionId" label="问题编号" width="80" />
        <el-table-column prop="questionTitle" label="问题标题" width="300"  />
        <el-table-column prop="questionContent" label="问题陈述" width="400" show-overflow-tooltip />
        <el-table-column prop="questionCreatetime" label="创建时间" />
        <el-table-column prop="user.userName" label="提问者名称" />
        <<el-table-column label="操作" width="250px ">
            <template #default="scope">
                <el-button size="small" @click="Look(scope.row.questionId)">
                    查看回复
                </el-button>
                <el-button size="small" @click="handleEdit(scope.row)">
                    修改
                </el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.row.questionId)">
                    删除
                </el-button>
            </template>
            </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
        v-model:current-page="queryInfo.pageNum"
        v-model:page-size="queryInfo.pageSize"
        :page-sizes="[1, 5, 10, 20]"
        :size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"/>

        <!-- 修改 -->
        <el-dialog v-model="saveOrUpdateVisible" :title="saveOrUpdateTitle"  width="500" @close="close">
            <el-form :model="question" status-icon >
                
                <el-form-item label="问题标题" :label-width="formLabelWidth">
                    <el-input v-model="question.questionTitle" autocomplete="off" />
                </el-form-item>
                <el-form-item label="问题陈述"  :label-width="formLabelWidth"  >
                    <el-input
                        v-model="question.questionContent"
                        style="width: 300px"
                        :rows="6"
                        type="textarea"
                        placeholder="请输入内容"
                    />
                </el-form-item>
               
            </el-form>
                        <template #footer>
                        <div class="dialog-footer">
                            <el-button @click="close">取消</el-button>
                            <el-button type="primary" @click="saveOrUpdate">
                            确定
                            </el-button>
                        </div>
                        </template>
        </el-dialog>

</template>

<script setup>
import axios from 'axios';
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue';
import { onMounted } from 'vue'; 
import { useRouter } from 'vue-router';
const router = useRouter();
const saveOrUpdateVisible = ref(false)
const saveOrUpdateTitle = ref('')
const question = ref({
    questionTitle:'',
    questionContent:''
})

const tableData = ref([])
const total = ref(0)
const queryInfo = ref({
    pageNum: 1,
    pageSize: 5,
    questionTitle: '',
    questionContent: ''
})
// 查看回复
const Look = (questionId) => {
    // 转调到查看回复页面
    router.replace({
        path: '/ReplyView',
        query: { questionId: questionId }
    });
    // 传递问题编号
//    console.log(questionId)
}
// 修改
const handleEdit = (row) => {
    saveOrUpdateTitle.value = '修改问题'
    saveOrUpdateVisible.value = true
    question.value = row

}

// 取消
const close=()=>{
    saveOrUpdateVisible.value = false; 
    question.value = {
        questionTitle: '',
        questionContent: '',
    }
}
// 确定
const saveOrUpdate=()=>{
    axios.put('/question/edit', question.value)
        .then(resp => {
            let result = resp.data;
            if (result.code == 1) {
                ElMessage({
                    message: '修改成功！',
                    type: 'success',
                })
                getQuestionList();
             
            } else {
                ElMessage({
                    message: '修改失败！',
                    type: 'warning',
                    })
            }       
        })
        saveOrUpdateVisible.value = false;
        close();
}

onMounted(() => {
    getQuestionList();
})
const getQuestionList = () => {
    axios.get('/question/findByPage', { params: queryInfo.value })
        .then(resp => {
            let result = resp.data;
            console.log(result.data)
            total.value = result.data.total;
            if (result.code == 1) {
                tableData.value = result.data.list
            } else {
                console.log('获取问题列表失败')
            }
        })
}
// 修改
// 删除
const handleDelete = (questionId) => {
    ElMessageBox.confirm(
        '真的要删除吗？',
        '提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        })
        .then(() => {
            axios.delete('/question/remove', {
                params: { questionId: questionId }
            })
        .then(resp => {
            let result = resp.data;
            if (result.code == 1) {
                getQuestionList();
                ElMessage({
                    message: '删除成功！',
                    type: 'success',
                })
            } else {
                ElMessage({
                    message: '删除失败！',
                    type: 'warning',
                })    
               
            }
        })

     })
   
  
}
// 分页
// 当用户改变每页显示的条目数时触发
const handleSizeChange = (pageSize) => {
  queryInfo.value.pageSize = pageSize;
  getQuestionList();
}
// 当用户改变当前页码时触发
const handleCurrentChange = (pageNum) => {
  queryInfo.value.pageNum = pageNum;
  getQuestionList();
}

</script>

<style scoped>
.el-table .cell{text-align: center;}
.el-table-column{text-align: center;}
</style>